<template>
  <div class="app-container">
    <el-row :gutter="50">
      <!--部门数据-->
      <el-col :span="5">
        <!--        <div class="head-container">-->
        <el-input
          v-model="categoryName"
          placeholder="请输入产品类型名称"
          clearable
          size="small"
          prefix-icon="el-icon-search"
          @keyup.enter.native="handleSelectCategoryOfTree"
        />
        <!--        </div>-->
        <div style="margin-top: 20px">
          <el-tree
            class="el-tree tree"
            :data="productCategoryTree"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            node-key="categoryId"
            default-expand-all
            ref="tree"
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--产品信息数据-->
      <el-col :span="19" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" @submit.native.prevent>
          <el-form-item label="产品名称">
            <el-input
              v-model="queryParams.productName"
              placeholder="请输入产品名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="产品系列">
            <!--            <el-select v-model="searchSeriesId" placeholder="产品系列">-->
            <!--              <el-option :value="optionValue">-->
            <!--                <el-tree-->
            <!--                  :data="classifyAndSeriesTree"-->
            <!--                  highlight-current-->
            <!--                />-->
            <!--              </el-option>-->
            <!--            </el-select>-->

            <treeselect v-model="searchSeriesId" :options="classifyAndSeriesTree"
                        :normalizer="classifyAndSeriesNormalizer"
                        :show-count="true" placeholder="请选择所属系列"
                        :disable-branch-nodes="true"
                        style="width: 200px"
            />
          </el-form-item>


          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                       v-hasPermi="['product:info:query']"
            >搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" v-if="false">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                       v-hasPermi="['product:info:add']"
            >新增
            </el-button>
            <el-button type="warning" icon="el-icon-download" size="mini" v-hasPermi="['product:info:export']"
                       @click="handleExport"
            >导出
            </el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="imageList" border>
          <el-table-column v-if="false" label="id" align="center" prop="id"/>
          <el-table-column label="产品名称" align="center" prop="productName" min-width="150"
                           :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="carImg"
            label="产品图"
            align="center"
            width="60"
          >
            <template slot-scope="scope">
              <el-popover
                placement="right"
                :title="scope.row.productName "
                trigger="hover"
              >
                <div style="border: 1px solid #cccbcb;float: left">
                  <img :src="scope.row.pZUrl" width="100"/>
                </div>
                <div style="border: 1px solid #cccbcb;float: left;margin-left: 10px">
                  <img :src="scope.row.pRUrl" width="100"/>
                </div>
                <img slot="reference" :src="scope.row.pZUrl" style="width: 25px;height: 25px">
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column label="产品类型" width="90" prop="categoryCode"
                           :show-overflow-tooltip="true" align="center"
          />

          <el-table-column label="品牌" align="center" prop="brandName">
            <template slot-scope="scope">
              <template v-if="scope.row.productBrand">
                <el-popover trigger="hover" placement="top-start">
                  <el-form label-width="80px">
                    <el-row>
                      <el-form-item label="联系人">
                        <el-tag>
                          {{
                            scope.row.productBrand.assistUserName === '' ? '未知' : scope.row.productBrand.assistUserName
                          }}
                        </el-tag>
                      </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item label="联系电话">
                        <el-tag>{{
                            scope.row.productBrand.assistPhone === '' ? '未知' : scope.row.productBrand.assistPhone
                          }}
                        </el-tag>
                      </el-form-item>
                    </el-row>
                  </el-form>
                  <el-tag type="success" slot="reference" style="margin-top: 3px">
                    {{
                      scope.row.productBrand.brandName
                    }}
                  </el-tag>
                </el-popover>
              </template>
            </template>
          </el-table-column>

          <el-table-column label="系列" align="center" min-width="130">
            <template slot-scope="scope">
              <template v-if="scope.row.productSeriesList">
                <el-popover trigger="hover" placement="top-start" :content="item.classifyName"
                            v-for="(item) in scope.row.productSeriesList"
                >
                  <el-tag type="info" slot="reference" style="margin-top: 3px">
                    {{
                      item.seriesName
                    }}
                  </el-tag>
                </el-popover>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="功能" width="250" header-align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.dictDataList">
                <el-popover trigger="hover" placement="top-start" :content="item.remark"
                            v-for="(item) in scope.row.dictDataList"
                >
                  <el-tag slot="reference"
                          style="margin-right: 5px;margin-top: 3px"
                  >
                    {{
                      item.dictLabel
                    }}
                  </el-tag>
                </el-popover>
              </template>
            </template>
          </el-table-column>

          <el-table-column label="自动入网" prop="zdrw" width="80" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.zdrw"
                active-color="#13ce66"
                active-value="Y"
                inactive-value="N"
                @change="zdrwSwitchChange($event,scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column v-if="false" label="大小" align="center" prop="size">
            <template slot-scope="scope">
              {{ parseInt(scope.row.pZSize / 1024) }}KB
            </template>
          </el-table-column>
          <el-table-column v-if="false" label="尺寸" align="center">
            <template slot-scope="scope">
              {{ scope.row.pZWidth }}X{{ scope.row.pZHeight }}
            </template>
          </el-table-column>

          <el-table-column v-if="false" label="图片链接" align="center" min-width="100" :show-overflow-tooltip="true"
                           prop="pZUrl"
          />
          <el-table-column label="备注" align="center" min-width="100" :show-overflow-tooltip="true" prop="remark"
                           v-if="false"
          />
          <el-table-column v-if="false" label="排序" align="center" prop="orderNum" width="50"/>
          <el-table-column v-if="false" label="创建时间" align="center" prop="createTime" width="160"/>
          <el-table-column v-if="false" label="创建者" align="center" prop="createBy"/>
          <el-table-column
            label="操作"
            align="center"
            min-width="150"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleDetailsView(scope.row)"
                v-hasPermi="['product:info:detail']"
              >详情
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['product:info:edit']"
              >修改
              </el-button>
              <el-button
                v-if="false"
                size="mini"
                type="text"
                icon="el-icon-bottom"
                @click="handleDown(scope.row)"
                v-hasPermi="['product:info:imageDownload']"
              >下载
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['product:info:remove']"
              >删除
              </el-button>

            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page-sizes="[10, 15, 20,50,100,200]"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 信息新增 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="800px" append-to-body
               :before-close="closeDialogConfirmAdd"
    >
      <el-form ref="form" :model="form" :rules="formRules" label-width="150px">
        <el-row>
          <el-col :span="12">
            <center>
              <div style="width: 50px;height: 50px;border: 1px solid  #ddd;">
                <img :src="pZImageUrl" v-if="pZImageUrl" style="width: 50px;height: 50px">
              </div>
            </center>
          </el-col>

          <el-col :span="12">
            <center>
              <div style="width: 50px;height: 50px;border: 1px solid  #ddd">
                <img :src="pRImageUrl" v-if="pRImageUrl" style="width: 50px;height: 50px">
              </div>
            </center>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <!-- 展示图上传-->
            <center>
              <el-form-item prop="displayImage" label-width="0">
                <el-upload
                  ref="pZUpload"
                  accept=".jpg, .png"
                  :headers="upload.headers"
                  :action="upload.url"
                  :data="{categoryId: form.categoryId,uuid:candidateUUID}"
                  :on-change="pZImgChange"
                  :disabled="upload.isPZImgUploading"
                  :on-progress="handlePZImgUploadProgress"
                  :on-success="handlePZImgSuccess"
                  :auto-upload="false"
                  :show-file-list="false"
                  list-type="picture"
                >
                  <el-button size="small" style="margin-top: 5px;margin-bottom: 5px">选择展示图</el-button>
                </el-upload>
              </el-form-item>
            </center>
          </el-col>

          <el-col :span="12">
            <!-- 入网图上传-->
            <center>
              <el-form-item label-width="0" prop="operationImage">
                <el-upload
                  ref="pRUpload"
                  accept=".jpg, .png"
                  :headers="upload.headers"
                  :action="upload.url"
                  :data="{categoryId: form.categoryId,uuid:candidateUUID+'_1'}"
                  :on-change="pRImgChange"
                  :disabled="upload.isPRImgUploading"
                  :on-progress="handlePRImgUploadProgress"
                  :on-success="handlePRImgSuccess"
                  :auto-upload="false"
                  :show-file-list="false"
                  list-type="picture"
                >
                  <el-button size="small" style="margin-top: 5px;margin-bottom: 5px">选择入网图</el-button>
                </el-upload>
              </el-form-item>
            </center>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="所属类型" prop="categoryId">
              <treeselect v-model="form.categoryId" :options="productCategoryTree"
                          :normalizer="productCategoryNormalizer"
                          :show-count="true" placeholder="请选择所属类型"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="所属系列" prop="seriesIdList">
              <treeselect v-model="selectedSeriesList" :options="classifyAndSeriesTree"
                          :normalizer="classifyAndSeriesNormalizer"
                          :show-count="true" placeholder="请选择所属系列"
                          :disable-branch-nodes="true"
                          :multiple="true"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="productName">
              <el-input
                v-model="form.productName"
                placeholder="请输入产品名称"
                clearable
                size="small"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属品牌" prop="brandId">
              <el-select v-model="form.brandId"
                         placeholder="所属品牌"
                         size="small"
                         style="width: 100%"
                         clearable
              >
                <el-option v-for="item in brandOptions"
                           :key="item.id"
                           :label="item.brandName"
                           :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="产品功能" prop="dictCodeList">
              <el-select v-model="selectedDictList" multiple placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in productFunctionOptions"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictCode"
                  :disabled="item.status === 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item label="安装教程" prop="installPromptUrl">
            <el-input v-model="form.installPromptUrl" placeholder="请输入安装教程链接" clearable/>
          </el-form-item>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="自动入网">
              <el-switch
                v-model="form.zdrw"
                active-color="#13ce66"
                active-value="Y"
                inactive-value="N"
              >
              </el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="1"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item label="入网操作">
            <!--            <quill-editor v-model="form.operationText" :options="editorOption"/>-->
            <el-input type="textarea" v-model="form.operationText" :rows="6"></el-input>
          </el-form-item>
        </el-row>


        <el-row v-if="false">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!--    修改  -->
    <el-dialog :title="upload.title" :visible.sync="upload.open1" width="800px" append-to-body
               :before-close="closeDialogConfirmUpdate"
    >
      <el-form ref="updateForm" :model="formUpdate" :rules="formUpdateRules" label-width="150px"
               enctype="multipart/form-data"
      >
        <el-row>
          <el-col :span="12">
            <center>
              <div style="width: 80px;height: 80px;">
                <img :src="pZImageUrl" style="width: 80px;height: 80px">
              </div>
            </center>
          </el-col>

          <el-col :span="12">
            <center>
              <div style="width: 80px;height: 80px">
                <img :src="pRImageUrl" style="width: 80px;height: 80px">
              </div>
            </center>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <!-- 展示图上传-->
            <center>
              <el-form-item prop="displayImage" label-width="0">
                <el-upload
                  ref="pZChangeUpload"
                  accept=".jpg, .png"
                  :headers="upload.headers"
                  :action="upload.url"
                  :data="{categoryId: formUpdate.categoryId,uuid:candidateUUID}"
                  :on-change="pZImgUpdateChange"
                  :disabled="upload.isPZImgChangeUploading"
                  :on-progress="handlePZImgChangeUploadProgress"
                  :on-success="handlePZImgChangeSuccess"
                  :auto-upload="false"
                  :show-file-list="false"
                  list-type="picture"
                >
                  <el-button size="small" style="margin-top: 5px;margin-bottom: 5px">修改展示图</el-button>
                </el-upload>
              </el-form-item>
            </center>
          </el-col>

          <el-col :span="12">
            <!-- 入网图上传-->
            <center>
              <el-form-item label-width="0" prop="operationImage">
                <el-upload
                  ref="pRChangeUpload"
                  accept=".jpg, .png"
                  :headers="upload.headers"
                  :action="upload.url"
                  :data="{categoryId: formUpdate.categoryId,uuid:candidateUUID+'_1'}"
                  :on-change="pRImgUpdateChange"
                  :disabled="upload.isPRImgChangeUploading"
                  :on-progress="handlePRImgChangeUploadProgress"
                  :on-success="handlePRImgChangeSuccess"
                  :auto-upload="false"
                  :show-file-list="false"
                  list-type="picture"
                >
                  <el-button size="small" style="margin-top: 5px;margin-bottom: 5px">修改入网图</el-button>
                </el-upload>
              </el-form-item>
            </center>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="所属类型" prop="categoryId">
              <treeselect v-model="formUpdate.categoryId" :options="productCategoryTree"
                          :normalizer="productCategoryNormalizer"
                          :show-count="true" placeholder="请选择所属类型"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="所属系列" prop="seriesIdList">
              <treeselect v-model="selectedSeriesList" :options="classifyAndSeriesTree"
                          :normalizer="classifyAndSeriesNormalizer"
                          :show-count="true" placeholder="请选择所属系列"
                          :disable-branch-nodes="true"
                          :multiple="true"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="productName">
              <el-input v-model="formUpdate.productName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属品牌" prop="brandId">
              <el-select v-model="formUpdate.brandId"
                         placeholder="所属品牌"
                         size="small"
                         style="width: 100%"
                         clearable
              >
                <el-option v-for="item in brandOptions"
                           :key="item.id"
                           :label="item.brandName"
                           :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品功能" prop="dictCodeList">
              <el-select v-model="selectedDictList" multiple placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in productFunctionOptions"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictCode"
                  :disabled="item.status === 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item label="安装教程" prop="installPromptUrl">
            <el-input v-model="formUpdate.installPromptUrl" placeholder="请输入安装教程链接" clearable/>
          </el-form-item>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="自动入网">
              <el-switch
                v-model="formUpdate.zdrw"
                active-color="#13ce66"
                active-value="Y"
                inactive-value="N"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="formUpdate.orderNum" controls-position="right" :min="1"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-form-item label="入网操作">
            <!--            <quill-editor v-model="formUpdate.operationText" :options="editorOption"/>-->
            <el-input type="textarea" v-model="formUpdate.operationText" :rows="6"/>
          </el-form-item>
        </el-row>

        <el-row v-if="false">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="formUpdate.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpdateForm">确 定</el-button>
        <el-button @click="upload.open1 = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--    产品详情-->
    <el-dialog :title="detailDialogTitle" :visible.sync="productDetailsOpen" width="700px" append-to-body>
      <el-form ref="detailsForm" :model="detailsForm" label-width="150px">
        <el-row>
          <el-col :span="12">
            <center>
              展示图
            </center>
          </el-col>
          <el-col :span="12">
            <center>
              入网图
            </center>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <center>
              <img :src="detailsForm.pZUrl" style="width: 80px;height: 80px">
            </center>
          </el-col>

          <el-col :span="12">
            <center>
              <img :src="detailsForm.pRUrl" style="width: 80px;height: 80px">
            </center>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <center>
              {{ parseInt(detailsForm.pZSize / 1024) }}KB | {{
                detailsForm.pZWidth
              }}x{{ detailsForm.pZHeight }}
            </center>
          </el-col>
          <el-col :span="12">
            <center>
              {{ parseInt(detailsForm.pRSize / 1024) }}KB | {{
                detailsForm.pRWidth
              }}x{{ detailsForm.pRHeight }}
            </center>
          </el-col>

          <el-col :span="12">
            <center>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-bottom"
                @click="handleImageDown('pZImage')"
              >下载
              </el-button>
            </center>
          </el-col>
          <el-col :span="12">
            <center>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-bottom"
                @click="handleImageDown('pRImage')"
              >下载
              </el-button>
            </center>
          </el-col>
        </el-row>

        <el-divider></el-divider>

        <el-row>
          <el-col :span="12">
            <el-form-item label="所属系列：">
              {{ detailsForm.seriesNameList.replaceAll(',', ' | ') }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属品牌：">
              {{ detailsForm.brandName }}
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="产品类型：">
              {{ detailsForm.categoryCode }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="自动入网：">
              {{ detailsForm.zdrw === 'Y' ? '是' : '否' }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="显示排序：">
              {{ detailsForm.orderNum }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="创建时间：">
              {{ detailsForm.createTime }}
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="产品功能：">
              {{ detailsForm.dictLabelList.replaceAll(',', ' | ') }}
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-form-item label="安装教程：">
            <a :href="detailsForm.installPromptUrl" target="_blank" style="text-decoration: underline"
               v-if="detailsForm.installPromptUrl"
            >
              <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                {{ detailsForm.installPromptUrl }}
              </div>
            </a>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="入网操作：">
            <!--            <div v-html="detailsForm.operationText"></div>-->
            <!--            <span style="white-space: pre-line;">-->
            <!--              {{ detailsForm.operationText }}-->
            <!--            </span>-->

            <p v-html="detailsForm.operationText"></p>
          </el-form-item>
        </el-row>

        <el-row v-if="false">
          <el-col :span="24">
            <el-form-item label="备注：">
              {{ detailsForm.remark }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  addProductInfo,
  delProductInfo,
  downImage,
  exportProductInfo,
  listProductInfo,
  updateProductInfo
} from '@/api/system/productInfo'
import { getToken } from '@/utils/auth'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { listProductCategory } from '@/api/system/deviceCategory'
import { getBrandList, getClassifyList, getSeriesList } from '@/api/system/productManage'
import { addChildrenToTree, getOrderNumOfList } from '@/utils/ruoyi'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { getUUID } from '@/utils/stringUtils'

export default {
  name: 'User',
  components: { Treeselect, quillEditor },
  data() {
    // 展示图校验
    let validDisplayImage = (rule, value, callback) => {
      if (this.pZImageUrl) {
        callback()
      } else {
        callback(new Error(`请上传展示图`))
      }
    }

    // 展示图校验
    let validOperationImage = (rule, value, callback) => {
      if (this.pZImageUrl) {
        callback()
      } else {
        callback(new Error(`请上传入网图`))
      }
    }

    return {
      searchSeriesId: null,
      optionValue: null,

      pZImageUrl: null,
      pRImageUrl: null,
      // 展示图是否上传完成
      pZImageUploadCompleted: false,
      // 展示图对象
      pZImageObject: null,
      // 入网图是否上传完成
      pRImageUploadCompleted: false,
      // 入网图对象
      pRImageObject: null,
      // 展示图是否被修改
      pZImageChanged: false,
      // 入网图是否被修改
      pRImageChanged: false,
      // 修改展示图是否上传完成
      pZImageChangedCompleted: false,
      // 修改入网图是否上传完成
      pRImageChangedCompleted: false,

      url: 'https://lough.oss-cn-beijing.aliyuncs.com/images/2020/08/21/15979917613867089.jpg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],

      fileList: [],//[{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],

      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 用户表格数据
      imageList: [],
      selectedCategoryId: null,
      // 弹出层标题
      title: '',
      // 产品类型树
      productCategoryTree: undefined,
      // 是否显示弹出层
      open: false,
      // 部门名称
      categoryName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      statusOptions: [],
      // 性别状态字典
      sexOptions: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 品牌选项
      brandOptions: [],
      // 所选择的字典ID列表
      selectedDictList: [],
      // 所选择的产品系列列表
      selectedSeriesList: [],
      // 产品功能字典选项
      productFunctionOptions: [],
      // 分类与系列树
      classifyAndSeriesTree: [],
      // 产品系列ID值的偏移量, 因为分类和系列在同一棵树中, 而ID不能相等, 所有产品系列的ID在生成树是需要转换
      seriesOffset: 10000,
      // add/update
      operationType: '',
      // 表单参数
      form: {
        productName: '',
        categoryId: '',
        brandId: '',
        zdrw: 'N',
        dictCodeList: '',
        seriesIdList: '',
        orderNum: 1,
        remark: '',
        operationText: '',
        installPromptUrl: ''
      },
      formUpdate: {
        productName: undefined,
        categoryId: undefined,
        brandId: undefined,
        dictCodeList: '',
        seriesIdList: '',
        orderNum: 1,
        remark: '',
        operationText: '',
        installPromptUrl: ''
      },
      detailsForm: {
        seriesNameList: '',
        dictLabelList: ''
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 详情页对话框
      productDetailsOpen: false,
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        open1: false,

        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isPZImgUploading: false,
        // 是否禁用上传
        isPRImgUploading: false,
        // 是否禁用上传
        isPZImgChangeUploading: false,
        // 是否禁用上传
        isPRImgChangeUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/system/image/uploadProductInfoImage'
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productName: undefined,
        categoryId: undefined
      },

      // 表单校验
      formUpdateRules: {
        categoryId: [
          { required: true, message: '所属类型不能为空', trigger: 'blur' }
        ],

        brandId: [
          { required: true, message: '所属品牌不能为空', trigger: 'blur' }
        ],

        dictCodeList: [
          { required: true, message: '产品功能不能为空', trigger: 'blur' }
        ],

        seriesIdList: [
          { required: true, message: '所属系列不能为空', trigger: 'blur' }
        ],

        productName: [
          { required: true, message: '产品名称不能为空', trigger: 'blur' }
        ],

        orderNum: [
          { required: true, message: '显示排序不能为空', trigger: 'blur' }
        ]
      },

      formRules: {
        categoryId: [
          { required: true, message: '所属类型不能为空', trigger: 'blur' }
        ],

        displayImage: [
          { required: true, validator: validDisplayImage, trigger: 'blur' }
        ],

        operationImage: [
          { required: true, validator: validOperationImage, trigger: 'blur' }
        ],

        brandId: [
          { required: true, message: '所属品牌不能为空', trigger: 'blur' }
        ],

        dictCodeList: [
          { required: true, message: '产品功能不能为空', trigger: 'blur' }
        ],

        seriesIdList: [
          { required: true, message: '所属系列不能为空', trigger: 'blur' }
        ],

        productName: [
          { required: true, message: '产品名称不能为空', trigger: 'blur' }
        ],

        orderNum: [
          { required: true, message: '显示排序不能为空', trigger: 'blur' }
        ]
      },

      // 详情对话框标题
      detailDialogTitle: '',
      // 富文本样式
      editorOption: {
        theme: 'snow',
        placeholder: '请输入',
        modules: {
          toolbar: [
            // 字体
            ['bold', 'underline'],
            // 标题
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            // 排序
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            // 字体
            [{ 'size': ['small', false, 'large', 'huge'] }],
            // 字体颜色，字体背景颜色
            [{ 'color': [] }, { 'background': [] }],
            //清除字体样式
            ['clean']
          ]
        }
      },
      // uuid, 用于产品图片的名称
      candidateUUID: ''
    }
  },
  computed: {
    // 新增展示图和入网图是否都已上传完成
    imageUploadComplete() {
      return this.pZImageUploadCompleted && this.pRImageUploadCompleted
    },

    // 修改表单展示图和入网图是否都已上传完成
    imageChangeUploadComplete() {
      return this.pZImageChangedCompleted && this.pRImageChangedCompleted
    }
  },
  created() {
    this.getList()
    this.getProductCategoryList()
    this.getClassifyAndSeriesTree()
    this.getBrandOptions()
    this.getDictDataByType('sys_normal_disable').then(response => {
      this.statusOptions = response.data
    })
    this.getDictDataByType('sys_user_sex').then(response => {
      this.sexOptions = response.data
    })
    this.getConfigKey('sys.user.initPassword').then(response => {
      this.initPassword = response.msg
    })
    this.getDictDataByType('sys_product').then(response => {
      this.productFunctionOptions = response.data
    })
  },
  watch: {
    selectedDictList(value) {
      if (this.operationType === 'add') {
        this.form.dictCodeList = value.join(',')
      }
      if (this.operationType === 'update') {
        this.formUpdate.dictCodeList = value.join(',')
      }
    },
    selectedSeriesList(value) {
      let ids = JSON.parse(JSON.stringify(value))
      if (ids && ids.length > 0) {
        // 重新计算产品系列ID
        this.addOffsetOnIntList(ids, -this.seriesOffset)
        if (this.operationType === 'add') {
          this.form.seriesIdList = ids.join(',')
        }
        if (this.operationType === 'update') {
          this.formUpdate.seriesIdList = ids.join(',')
        }
      } else {
        this.form.seriesIdList = ''
        this.formUpdate.seriesIdList = ''
      }
    },
    // 判断图片是否已上传完成
    imageUploadComplete(value) {
      if (value) {
        this.submitAddProductInfo()
      }
    },

    // 判断修改图片是否已上传完成
    imageChangeUploadComplete(value) {
      if (value) {
        this.submitUpdateProductInfo()
      }
    }
  },
  methods: {
    getUUID,
    /** 查询产品信息列表 */
    getList() {
      this.loading = true
      listProductInfo(this.queryParams).then(response => {
          this.imageList = response.rows
          for (let i = 0, len = this.imageList.length; i < len; i++) {
            if (this.imageList[i].installPromptUrl === '无') {
              this.imageList[i].installPromptUrl = ''
            }
            if (this.imageList[i].operationText === '无') {
              this.imageList[i].operationText = ''
            }
          }
          this.total = response.total
          this.loading = false
        }
      )
    },
    /** 添加产品信息 */
    submitAddProductInfo() {
      if (this.pZImageObject && this.pRImageObject) {
        let productInfo = {
          id: this.candidateUUID,
          categoryId: this.form.categoryId,
          brandId: this.form.brandId,
          seriesIdList: this.form.seriesIdList,
          dictCodeList: this.form.dictCodeList,
          productName: this.form.productName,
          zdrw: this.form.zdrw,
          operationText: this.form.operationText,

          pZImageUID: this.pZImageObject.imageUid,
          pZUrl: this.pZImageObject.url,
          pZOssUrl: this.pZImageObject.ossUrl,
          pZSize: this.pZImageObject.size,
          pZWidth: this.pZImageObject.width,
          pZHeight: this.pZImageObject.height,

          pRImageUID: this.pRImageObject.imageUid,
          pRUrl: this.pRImageObject.url,
          pROssUrl: this.pRImageObject.ossUrl,
          pRSize: this.pRImageObject.size,
          pRWidth: this.pRImageObject.width,
          pRHeight: this.pRImageObject.height,

          orderNum: this.form.orderNum,
          remark: this.form.remark,
          installPromptUrl: this.form.installPromptUrl
        }

        addProductInfo(productInfo).then(response => {
          this.reset()
          this.upload.open = false
          this.$alert('导入成功', '导入结果', { dangerouslyUseHTMLString: true })
          this.getList()
        })
      }

      //重置相关状态
      this.pZImageUploadCompleted = false
      this.pZImageObject = null
      this.pRImageUploadCompleted = false
      this.pRImageObject = null
    },
    /** 修改产品信息 */
    submitUpdateProductInfo() {
      let productInfo = {}
      // 填充产品信息基本信息
      productInfo.id = this.formUpdate.id
      productInfo.categoryId = this.formUpdate.categoryId
      productInfo.seriesIdList = this.formUpdate.seriesIdList
      productInfo.productName = this.formUpdate.productName
      productInfo.brandId = this.formUpdate.brandId
      productInfo.dictCodeList = this.formUpdate.dictCodeList
      productInfo.zdrw = this.formUpdate.zdrw
      productInfo.orderNum = this.formUpdate.orderNum
      productInfo.remark = this.formUpdate.remark
      productInfo.operationText = this.formUpdate.operationText
      productInfo.installPromptUrl = this.formUpdate.installPromptUrl

      // 若修改过展示图
      if (this.pZImageChanged) {
        productInfo.pZImageUID = this.pZImageObject.imageUid
        productInfo.pZUrl = this.pZImageObject.url
        productInfo.pZOssUrl = this.pZImageObject.ossUrl
        productInfo.pZSize = this.pZImageObject.size
        productInfo.pZWidth = this.pZImageObject.width
        productInfo.pZHeight = this.pZImageObject.height
      }

      // 若修改过展示图
      if (this.pRImageChanged) {
        productInfo.pRImageUID = this.pRImageObject.imageUid
        productInfo.pRUrl = this.pRImageObject.url
        productInfo.pROssUrl = this.pRImageObject.ossUrl
        productInfo.pRSize = this.pRImageObject.size
        productInfo.pRWidth = this.pRImageObject.width
        productInfo.pRHeight = this.pRImageObject.height
      }

      updateProductInfo(productInfo).then(response => {
        if (response.code === 200) {
          this.msgSuccess('修改成功')
          this.upload.open1 = false
          this.getList()
        }
      })

      // 重置相关状态
      this.pZImageChanged = false
      this.pZImageChangedCompleted = false
      this.pZImageObject = null

      this.pRImageChanged = false
      this.pRImageChangedCompleted = false
      this.pRImageObject = null
    },
    /** 查询产品分类系列 */
    getClassifyAndSeriesTree() {
      // 查询产品分类
      getClassifyList({ status: '0' }).then(response => {
        let classifyList = response.rows
        // 添加树节点的显示标签
        for (let i = 0, len = classifyList.length; i < len; i++) {
          classifyList[i].label = classifyList[i].classifyName
        }

        let classifyTree = this.handleTree(classifyList)

        // 查询产品系列, 将其加入分类树中
        getSeriesList({ status: '0' }).then(response => {
          let seriesList = response.rows

          // 添加树节点的显示标签
          for (let i = 0, len = seriesList.length; i < len; i++) {
            seriesList[i].label = seriesList[i].seriesName
          }

          this.addOffsetOnObjectList(seriesList, this.seriesOffset, 'id')
          for (let i = 0, len = seriesList.length; i < len; i++) {
            addChildrenToTree(classifyTree, 'id', seriesList[i].classifyId, seriesList[i])
          }

          this.classifyAndSeriesTree = classifyTree
        })
      })
    }
    ,
    /** 查询品牌options */
    getBrandOptions() {
      getBrandList().then(response => {
        this.brandOptions = response.rows
      })
    },
    getProductCategoryList() {
      listProductCategory({ status: '0' }).then(response => {
        let categoryList = response.data
        // 添加label属性
        for (let i = 0, len = categoryList.length; i < len; i++) {
          if (categoryList[i].categoryName && categoryList[i] !== '' && categoryList[i].categoryId !== 100) {
            categoryList[i].label = categoryList[i].categoryNum + ' (' + categoryList[i].categoryName + ')'
          } else {
            categoryList[i].label = categoryList[i].categoryNum
          }
        }
        this.productCategoryTree = this.handleTree(categoryList, 'categoryId')
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.categoryId = data.categoryId
      this.selectedCategoryId = data.categoryId
      this.getList()
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === '0' ? '启用' : '停用'
      this.$confirm('确认要"' + text + '""' + row.userName + '"用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return changeUserStatus(row.userId, row.status)
      }).then(() => {
        this.msgSuccess(text + '成功')
      }).catch(function() {
        row.status = row.status === '0' ? '1' : '0'
      })
    },
    // 取消按钮
    cancel() {
      this.upload.open = false
      this.$refs.pZUpload.clearFiles()
      this.$refs.pRUpload.clearFiles()
    },

    // 上传修改的图片
    submitUpdateForm() {
      this.$refs['updateForm'].validate(valid => {
        if (valid) {
          // 若需要修改展示图
          if (this.pZImageChanged) {
            this.$refs['pZChangeUpload'].submit()
          } else {
            // 若不需要修改, 则直接将状态修改为完成
            this.pZImageChangedCompleted = true
          }

          // 若需要修改入网图
          if (this.pRImageChanged) {
            this.$refs['pRChangeUpload'].submit()
          } else {
            // 若不需要修改, 则直接将状态修改为完成
            this.pRImageChangedCompleted = true
          }
        }
      })
    },

    // 表单重置
    reset() {
      this.form = {
        productName: '',
        zdrw: 'N',
        categoryId: '',
        dictCodeList: '',
        seriesIdList: '',
        orderNum: 1,
        remark: '',
        operationText: '',
        installPromptUrl: ''
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // 若按系列搜索
      if (this.searchSeriesId) {
        this.queryParams.selectSeriesId = this.searchSeriesId - this.seriesOffset
      } else {
        this.queryParams.selectSeriesId = null
      }
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const productInfoId = row.id || this.ids
      this.$confirm('是否确认删除名称为"' + row.productName + '"的数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delProductInfo(productInfoId)
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      }).catch(function() {
      })
    },

    handleDown(row) {
      this.$confirm('是否确认下载名称为"' + row.productName + '"的数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {

        return downImage(row.pzimageUID)
      }).then(() => {
        window.location.href = row.pzossUrl
      }).catch(function() {
      })
    },

    // 下载图片
    handleImageDown(imageType) {
      let productName = ''
      let imageUid = ''
      let ossUrl = ''
      // 若是下载展示图
      if (imageType === 'pZImage') {
        imageUid = this.detailsForm.pZImageUID
        ossUrl = this.detailsForm.pZOssUrl
      }
      // 若是下载入网图
      if (imageType === 'pRImage') {
        imageUid = this.detailsForm.pRImageUID
        ossUrl = this.detailsForm.pROssUrl
      }

      productName = imageUid.substring(imageUid.lastIndexOf('/') + 1)
      this.$confirm('是否确认下载名称为"' + productName + '"的数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return downImage(imageUid)
      }).then(() => {
        window.location.href = ossUrl
      })
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportProductInfo(queryParams)
      }).then(response => {
        this.download(response.msg)
      }).catch(function() {
      })
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.candidateUUID = this.getUUID()
      this.pZImageUrl = null
      this.pRImageUrl = null
      this.operationType = 'add'
      this.selectedDictList = []
      this.selectedSeriesList = []
      this.upload.title = '产品新增'
      this.upload.open = true
      this.form.categoryId = this.selectedCategoryId

      let orderNum = 1
      if (this.selectedCategoryId) {
        orderNum = getOrderNumOfList(this.imageList.filter(item => item.categoryId === this.selectedCategoryId))
      }
      this.form.orderNum = orderNum
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.resetForm('updateForm')
      this.candidateUUID = row.id
      this.operationType = 'update'
      // 取出该数据的dictCodeList, 将其赋给this.selectedDictList
      if (row.dictCodeList) {
        let strList = row.dictCodeList.split(',')
        let intList = []
        for (let i = 0, len = strList.length; i < len; i++) {
          intList.push(parseInt(strList[i]))
        }
        this.selectedDictList = intList
      } else {
        this.selectedDictList = []
      }

      // 取出该数据的seriesIdList, 将其赋给this.seriesIdList
      if (row.seriesIdList) {
        let strList = row.seriesIdList.split(',')
        let intList = []
        for (let i = 0, len = strList.length; i < len; i++) {
          intList.push(parseInt(strList[i]))
        }
        this.addOffsetOnIntList(intList, this.seriesOffset)
        this.selectedSeriesList = intList
      } else {
        this.selectedSeriesList = []
      }

      // 产品图片
      this.pZImageUrl = row.pZUrl
      this.pRImageUrl = row.pRUrl

      this.upload.title = '产品修改'
      this.formUpdate = JSON.parse(JSON.stringify(row))
      this.upload.open1 = true
    },
    // 展示图上传中处理
    handlePZImgUploadProgress(event, file, fileList) {
      this.upload.isPZImgUploading = true
    },
    // 展示图上传成功处理
    handlePZImgSuccess(response, file, fileList) {
      this.pZImageObject = response.data
      this.$refs.pZUpload.clearFiles()
      this.upload.isPZImgUploading = false
      this.pZImageUploadCompleted = true
    },

    // 入网图上传中处理
    handlePRImgUploadProgress(event, file, fileList) {
      this.upload.isPRImgUploading = true
    },
    // 入网图上传成功处理
    handlePRImgSuccess(response, file, fileList) {
      this.pRImageObject = response.data
      this.$refs.pRUpload.clearFiles()
      this.upload.isPRImgUploading = false
      this.pRImageUploadCompleted = true
    },

    // 修改表单展示图上传中处理
    handlePZImgChangeUploadProgress(event, file, fileList) {
      this.upload.isPZImgChangeUploading = true
    },
    // 修改表单展示图上传成功处理
    handlePZImgChangeSuccess(response, file, fileList) {
      this.pZImageObject = response.data
      this.$refs.pZChangeUpload.clearFiles()
      this.upload.isPZImgChangeUploading = false
      this.pZImageChangedCompleted = true
    },

    // 修改表单入网图上传中处理
    handlePRImgChangeUploadProgress(event, file, fileList) {
      this.upload.isPRImgChangeUploading = true
    },
    // 修改表单入网图上传成功处理
    handlePRImgChangeSuccess(response, file, fileList) {
      this.pRImageObject = response.data
      this.$refs.pRChangeUpload.clearFiles()
      this.upload.isPRImgChangeUploading = false
      this.pRImageChangedCompleted = true
    },

    // 提交上传文件
    submitAddForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$refs.pZUpload.submit()
          this.$refs.pRUpload.submit()
        }
      })
    },
    // 展示图文件修改
    pZImgChange(file, fileList) {
      // 当有文件是取该文件名, 因为on-change在文件上传成功后也会调用, 此时fileList的长度为0, 且不需要再取文件名了
      if (fileList.length > 0) {
        this.form.productName = file.name.substring(0, file.name.indexOf('.'))
      }
      this.pZImageUrl = file.url

      // 只保留最新的文件
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    // 入网图文件修改
    pRImgChange(file, fileList) {
      this.pRImageUrl = file.url

      // 只保留最新的文件
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    // 修改表单的展示图文件修改
    pZImgUpdateChange(file, fileList) {
      this.pZImageChanged = true
      // 获取图片大小
      this.form.pZSize = file.size
      this.form.productName = file.name.substring(0, file.name.indexOf('.'))
      this.pZImageUrl = file.url

      // 只保留最新的文件
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    // 修改表单的入网图文件修改
    pRImgUpdateChange(file, fileList) {
      this.pRImageChanged = true
      // 获取图片大小
      this.form.pRSize = file.size
      this.pRImageUrl = file.url

      // 只保留最新的文件
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    // 产品类别选择树变量名
    productCategoryNormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.categoryId,
        label: node.label,
        children: node.children
      }
    },
    // 产品分类和系列选择树变量名
    classifyAndSeriesNormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      // 系列含有classify属性, 而分类没有
      return {
        id: node.id,
        label: node.classifyId ? node.seriesName : node.classifyName,
        children: node.children
      }
    },
    // 触发树节点过滤
    handleSelectCategoryOfTree() {
      this.$refs.tree.filter(this.categoryName)
    },
    /**
     * 对象数组中的每个对象的variableName变量增加offset
     * @param objectList 对象数组
     * @param offset
     * @param variableName
     */
    addOffsetOnObjectList(objectList, offset, variableName) {
      if (objectList) {
        for (let i = 0, len = objectList.length; i < len; i++) {
          objectList[i][variableName] += offset
        }
      }
    },
    /**
     * 数组中的每个值都增加offset
     * @param list 数字型数组
     * @param offset
     */
    addOffsetOnIntList(list, offset) {
      if (list) {
        for (let i = 0, len = list.length; i < len; i++) {
          list[i] += offset
        }
      }
    },
    // 自动入网switch改变
    zdrwSwitchChange(value, productInfo) {
      updateProductInfo(productInfo).then(response => {
        if (response.code === 200) {
          this.msgSuccess('修改成功')
          this.getList()
        }
      }, reject => {
        this.getList()
      })
    },
    // 点击详情
    handleDetailsView(productInfo) {
      this.detailDialogTitle = productInfo.productName

      this.detailsForm = JSON.parse(JSON.stringify(productInfo))
      this.detailsForm.operationText = this.detailsForm.operationText.replaceAll('\n', '<br>')
      this.productDetailsOpen = true
    },

    /**
     * 新增对话框确认关闭
     */
    closeDialogConfirmAdd() {
      this.$confirm('确认关闭?').then(() => {
        this.upload.open = false
      }).catch(() => {
      })
    },

    /**
     * x修改对话框确认关闭
     */
    closeDialogConfirmUpdate() {
      this.$confirm('确认关闭?').then(() => {
        this.upload.open1 = false
      }).catch(() => {
      })
    }
  }
}
</script>
<style scoped>
.el-tree {
  min-width: 100%;
  /*font-size: 14px;*/
  display: inline-block;;
}

.tree {
  overflow-y: auto;
  height: calc(70vh);
  /*width:200px;*/
  border: 1px solid #cdcdd7;
}
</style>
